<template>
	<div class="centent" scoped>
		<div class="sift">
			<div class="sift-title">
				<span class="sift-title-tu"></span>
				<span class="sift-title-mun">
				精选专题推荐
			    </span>
			</div>
			<ul class="line">

				<li @mouseenter='enter' @mouseleave="leave" class="line-tu" v-for='(sd,index) in line'><img :src="sd.url" />
					<span class="line-tu-change">
						<div class="line-tu-change-center">
							<span class="line-tu-change-title" :title="sd.title" >
								{{sd.title}}
							</span>
					<a href=""><span class="line-tu-change-zi"><i class="line-tu-change-zi-i">点击查看 > </i> </span></a>
		</div>
		</span>
		</li>

		</ul>
	</div>
	</div>

</template>

<script>
	export default {
		props: {
			sift: {
				type: Object
			}
		},
		methods: {
			enter(e) {
				
				$(e.target).find('.line-tu-change').stop().animate({ top: "0" })
			},
			leave(e) {
				$(e.target).find('.line-tu-change').stop().animate({ top: "139px" })
				
			}
		},
		data() {
			return {
				line: [{
					title: "关注民生 聚焦两会",
					url: "static/sift/1.jpg"
				}, {
					title: "新中式背景墙",

					url: "static/sift/2.png"
				}, {
					title: "公司简介PPT模板",

					url: "static/sift/3.jpg"
				}, {
					title: "小升初简历模板",

					url: "static/sift/4.jpg"
				}, {
					title: "精品特效字幕条",

					url: "static/sift/5.jpg"
				}, {
					title: "招聘季精品素材",

					url: "static/sift/6.jpg"
				}, {
					title: "2017春季上新",

					url: "static/sift/7.jpg"
				}, {
					title: "精品无框画",

					url: "static/sift/8.png"
				}]
			}
		}

	}
</script>

<style lang="less" rel="stylesheet/less">
	.centent {
		position: absolute;
		width: 100%;
		height: 538px;
		top: 660px;
		.sift {
			width: 1200px;
			height: 518px;
			margin: 0 auto;
			background: white;
			.sift-title {
				width: 200px;
				height: 84px;
				margin-left: 24px;
				.sift-title-tu {
					vertical-align: middle;
					display: inline-block;
					margin-right: 20px;
					width: 30px;
					height: 30px;
					background: url(new.png);
					background-position: -34px -193px;
				}
				.sift-title-mun {
					font-size: 20px;
					height: 84px;
					line-height: 84px;
					/*font-weight: 700;*/
				}
			}
			.line {
				display: inline-block;
				.line-tu {
					position: relative;
					display: inline-block;
					margin-left: 22.4px;
					margin-bottom: 35px;
					overflow: hidden;
					/*&:hover .line-tu-change {
						animation: lings 1s;
						animation-fill-mode: forwards;
					}*/
					.line-tu-change {
						position: absolute;
						width: 272px;
						height: 182px;
						top: 139px;
						left: 0;
						.line-tu-change-center {
							background: rgba(0, 0, 0, 0.5);
							height: 182px;
							.line-tu-change-title {
								vertical-align: middle;
								display: block;
								text-align: center;
								padding-top: 15px;
								color: white;
							}
							.line-tu-change-zi {
								vertical-align: middle;
								display: block;
								text-align: center;
								margin-top: 29px;
								.line-tu-change-zi-i {
									font-size: 14px;
									font-style: normal;
									padding: 8px 8px;
									color: white;
									background: rgb(0, 179, 105);
								}
							}
						}
					}
				}
			}
		}
	}
	
	@-webkit-keyframes lings {
		from {
			top: 135px;
		}
		to {
			top: 0;
		}
	}
	
	@-webkit-keyframes leave {
		from {
			top: 0;
		}
		to {
			top: 135px;
		}
	}
</style>